<!-- <page-header [title]="''"></page-header> -->
<nz-card>
    <nz-tabset>
        <nz-tab [nzTitle]="'消息回复'">
            <nz-card>
                <div nz-row>
                    <div nz-col [nzSpan]="6">
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" nzFor="type">回复类型</nz-form-label>
                            <nz-form-control [nzSpan]="18">
                                <nz-select name="type" [(ngModel)]="param.triType">
                                    <nz-option *ngFor="let i of triggerTypesMe" [nzLabel]="i.text" [nzValue]="i.value">
                                    </nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="6">
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" nzFor="msType">消息类型</nz-form-label>
                            <nz-form-control [nzSpan]="18">
                                <nz-select name="msType" [(ngModel)]="param.msType">
                                    <nz-option *ngFor="let i of msgTypesMe" [nzLabel]="i.text" [nzValue]="i.value">
                                    </nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="8">
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" nzFor="mesText">关键字/事件Key</nz-form-label>
                            <nz-form-control [nzSpan]="18">
                                <input nz-input name="mesText" [(ngModel)]="param.mesText"
                                    [placeholder]="'请输入关键字/事件Key'">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="4" style="float:right;text-align: right; padding-left:0">
                        <button nz-button (click)="refresh()" nzType="primary">
                            搜索
                        </button>
                        <button nz-button (click)="create()" nzType="primary">
                            <i nz-icon nzType="plus" theme="outline"></i>
                            <span>新增</span>
                        </button>
                    </div>
                </div>
                <ng-template #totalTemplate let-total>共 {{totalItems}} 条</ng-template>
                <nz-table #ajaxTable nzShowSizeChanger [nzData]="dataList" [nzShowTotal]="totalTemplate"
                    [nzTotal]="totalItems" [(nzPageIndex)]="pageNumber" [(nzPageSize)]="pageSize"
                    [nzLoading]="isTableLoading" (nzPageIndexChange)="refresh()" (nzPageSizeChange)="refresh()"
                    [nzFrontPagination]="false">
                    <thead>
                        <tr>
                            <th>关键字/事件Key</th>
                            <!-- <th>匹配模式（枚举 精准匹配、模糊匹配）</th> -->
                            <th>回复类型</th>
                            <th>消息类型</th>
                            <th>回复内容</th>
                            <th>文章地址</th>
                            <th>操作</th>
                        </tr>

                    </thead>
                    <tbody>
                        <tr *ngFor="let item of ajaxTable.data">
                            <td>{{item.keyWord}}</td>
                            <!-- <td>{{item.matchMode}}</td> -->
                            <td>{{item.triggerTypeName}}</td>
                            <td>{{item.msgTypeName}}</td>
                            <td>{{item.content}}</td>
                            <td>{{item.url}}</td>
                            <td>
                                <a (click)="edit(item)">编辑</a>
                                <nz-divider nzType="vertical"></nz-divider>
                                <a style="color:#ff4d4f;" (click)="delete(item)">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </nz-card>
        </nz-tab>

        <nz-tab [nzTitle]="'关注回复'">

            <form nz-form #validateForm="ngForm" (ngSubmit)="saveSub()" *ngIf="wechatSubscribe">
                <div nz-col [nzSpan]="24">
                    <!-- 消息类型 -->
                    <nz-form-item nz-row>
                        <nz-form-label nz-col [nzSm]="3" [nzXs]="24" nzRequired nzFor="msgType">消息类型</nz-form-label>
                        <nz-form-control nz-col [nzSm]="17" nzHasFeedback>
                            <nz-radio-group name="msgType" #msgType="ngModel" [(ngModel)]="wechatSubscribe.msgType"
                                autocomplete="msgType" class="mb-md">
                                <label nz-radio *ngFor="let o of msgTypes" [nzValue]="o.value">
                                    <span>{{o.text}}</span>
                                </label>
                            </nz-radio-group>
                            <nz-form-explain *ngIf="msgType.control.dirty&&msgType.control.errors">
                                <ng-container *ngIf="msgType.control.hasError('required')">{{l('CanNotNull')}}
                                </ng-container>
                            </nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>

                    <!-- 回复内容 -->
                    <nz-form-item *ngIf="wechatSubscribe.msgType==1" nz-row>
                        <nz-form-label [nzSm]="3" [nzXs]="24" nzRequired nzFor="content">回复内容</nz-form-label>
                        <nz-form-control [nzSm]="17">
                            <textarea nz-input name="content" #content="ngModel" [(ngModel)]="wechatSubscribe.content"
                                maxlength="200" autocomplete="content" [nzAutosize]="{ minRows: 6}" required></textarea>
                            <nz-form-explain *ngIf="content.control.dirty&&content.control.errors">
                                <ng-container *ngIf="content.control.hasError('required')">{{l('CanNotNull')}}
                                </ng-container>
                                <ng-container *ngIf="content.control.hasError('maxlength')">{{l('MaxLength')}}
                                </ng-container>
                            </nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>

                    <div *ngIf="wechatSubscribe.msgType==2">
                        <!-- 标题 -->
                        <nz-form-item nz-row>
                            <nz-form-label nz-col [nzSm]="3" [nzXs]="24" nzRequired nzFor="title">标题</nz-form-label>
                            <nz-form-control nz-col [nzSm]="17" nzHasFeedback>
                                <input nz-input name="title" #title="ngModel" [(ngModel)]="wechatSubscribe.title"
                                    autocomplete="title" maxlength="200" required>
                                <nz-form-explain *ngIf="title.control.dirty&&title.control.errors">
                                    <ng-container *ngIf="title.control.hasError('required')">{{l('CanNotNull')}}
                                    </ng-container>
                                    <ng-container *ngIf="title.control.hasError('maxlength')">{{l('MaxLength')}}
                                    </ng-container>
                                </nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>

                        <!-- 图片链接 -->
                        <nz-form-item nz-row>
                            <nz-form-label nz-col [nzSm]="3" [nzXs]="24" nzRequired nzFor="picLink">图片链接</nz-form-label>
                            <nz-form-control nz-col [nzSm]="17" nzHasFeedback>
                                <input nz-input name="picLink" #picLink="ngModel" [(ngModel)]="wechatSubscribe.picLink"
                                    autocomplete="picLink" maxlength="200" required>
                                <nz-form-explain *ngIf="picLink.control.dirty&&picLink.control.errors">
                                    <ng-container *ngIf="picLink.control.hasError('required')">{{l('CanNotNull')}}
                                    </ng-container>
                                    <ng-container *ngIf="picLink.control.hasError('maxlength')">{{l('MaxLength')}}
                                    </ng-container>
                                </nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>
                        <!-- 文章链接 -->
                        <nz-form-item nz-row>
                            <nz-form-label nz-col [nzSm]="3" [nzXs]="24" nzRequired nzFor="url">文章链接</nz-form-label>
                            <nz-form-control nz-col [nzSm]="17" nzHasFeedback>
                                <input nz-input name="url" #url="ngModel" [(ngModel)]="wechatSubscribe.url"
                                    autocomplete="url" maxlength="200" required>
                                <nz-form-explain *ngIf="url.control.dirty&&url.control.errors">
                                    <ng-container *ngIf="url.control.hasError('required')">{{l('CanNotNull')}}
                                    </ng-container>
                                    <ng-container *ngIf="url.control.hasError('maxlength')">{{l('MaxLength')}}
                                    </ng-container>
                                </nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>

                        <!-- 描述 -->
                        <nz-form-item nz-row>
                            <nz-form-label nz-col [nzSm]="3" [nzXs]="24" nzRequired nzFor="desc">描述</nz-form-label>
                            <nz-form-control nz-col [nzSm]="17" nzHasFeedback>
                                <textarea nz-input name="desc" #desc="ngModel" [(ngModel)]="wechatSubscribe.desc"
                                    autocomplete="desc" maxlength="200" required
                                    [nzAutosize]="{ minRows: 6}"></textarea>
                                <nz-form-explain *ngIf="desc.control.dirty&&desc.control.errors">
                                    <ng-container *ngIf="desc.control.hasError('required')">{{l('CanNotNull')}}
                                    </ng-container>
                                    <ng-container *ngIf="desc.control.hasError('maxlength')">{{l('MaxLength')}}
                                    </ng-container>
                                </nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>
                <footer-toolbar>
                    <button nz-button type="button" [nzType]="'danger'" [hidden]="!isDelete" (click)="deleteSub()"
                        [nzLoading]="isConfirmLoadingDe">
                        {{l("删除")}}
                    </button>
                    <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid||saving"
                        [nzLoading]="isConfirmLoadingSa">
                        {{l("保存")}}
                    </button>
                    <!-- <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid||saving" [nzLoading]="isConfirmLoadingSa">
                        {{l("保存")}}
                    </button> -->
                </footer-toolbar>
            </form>
        </nz-tab>
    </nz-tabset>
</nz-card>